<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>02-js实现下拉菜单</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0}
    #nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}
    ul {list-style: none;}
    ul li{ float: left;line-height: 40px;text-align: center;position: relative}
    a{text-decoration: none;display: block;color: #000;width: 90px}
    a:hover{color: #fff;background-color: #666;}
    ul li ul li{ float: none;background-color: #eee;margin-top: 2px;}
    ul li ul{position: absolute;left: 0;top:40px;width: 90px;display: none}
   /* ul li ul li a:hover{ background-color: #06f;}
    ul li:hover ul{display: block}*/
</style>
<script type="text/javascript">
    function showsubmenu(li){
        var submenu=li.getElementsByTagName("ul")[0];
        submenu.style.display="block";
    }
    function hidesubmenu(li){
        var submenu=li.getElementsByTagName("ul")[0];
        submenu.style.display="none";
    }
</script>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li onmousemove="showsubmenu(this)"onmouseout="hidesubmenu(this)">
            <a href="#">一级菜单</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="#">一级菜单</a>
            <ul>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>

</div>
</body>
</html>